<template>
	<view class="content" style="" v-if="loading" style="overflow: hidden;">
		<!-- :backgroundColor="backgroundColor" -->
		<!-- <uni-nav-bar title="订单详情" :fixed="true" :color="fontColor" :statusBar="true" :border="false"
			:backgroundColor="nav_opacity" left-icon="left" leftText="返回" :placeholder="false" @clickLeft="clickLeft">
		</uni-nav-bar> -->
		<!-- <u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true">
		</u-navbar> -->
		<!-- 顶部背景 -->
		<view class="tang-feng-bg"></view>
		<!--内容区 -->
		<view class="tang-feng-block margin-bottom-xl">
			<!-- 用户数据块 -->
			<view class="tang-feng-data">
				<!-- 地址信息 -->
				<view class="detailitem detail-address" @click="toggleTab" v-if="address.length">
					<view class="top flex justify-between align-center">
						
						地址：{{address[0].area||address[0][0].area||""}}{{address[0].address||address[0][0].address}}<u-icon v-if="!addtype" name="arrow-right"
								color="#2979ff" size="28"></u-icon>
					</view>
					
					<view class="address">
						{{address[0].name||address[0][0].name}}
						<view class="margin-left">
							{{address[0].phone||address[0][0].phone}}
						</view>
					</view>

				</view>
				<view class="detailitem detail-address" @click="toggleTab" v-else>
					<text>当前暂无选择地址,点击选择</text>
				</view>
				<!-- 商品信息 -->
				<view class="detailitem shopBox">
					<view class="item" v-for="(item,index) in orderInfo.ordersInfos" :key="index" v-if="type">
						<image :src="item.image.split(',')[0]" mode="" style="width: 160rpx;height: 160rpx;"></image>
						<view class="conBox">
							<view class="conBox-1">{{item.name}}</view>
							<view class="conBox-2">{{item.attributeList}}</view>
							<view class="conBox-3">￥{{item.price}}</view>
						</view>
						<view class="number">
							<view class="">x{{item.num}}</view>
							<view class="margin-top">
								<u-button v-if="!item.status&&(orderInfo.state>0&&orderInfo.state<4)" size="mini" type="warning"
									@click="pathUrl(0,item.productNo)">申请售后</u-button>
								<text class="text-yellow" v-if="item.statusName">{{item.statusName}}</text>
							</view>
						</view>
					</view>

					<view class="item" v-for="(item,index) in orderInfo.list" :key="index" v-if="!type">
						<image :src="item.image.split(',')[0]" mode="" style="width: 160rpx;height: 160rpx;"></image>
						<view class="conBox">
							<view class="conBox-1">{{orderInfo.body.split(',')[index]}}</view>
							<view class="conBox-2">{{item.attributeList}}</view>
							<view class="conBox-3">￥{{item.price}}</view>
						</view>
						<view class="number">x{{item.num}}</view>
					</view>
				</view>
				<!-- 订单信息 -->
				<view class="detailitem orderItem" style="margin-bottom: 100rpx;" v-if="type==2">
					<view class="orderItem-min" v-if="orderInfo.orderNo">
						<view class="orderItem-1">订单编号：</view>
						<view class="orderItem-2">{{orderInfo.orderNo}}</view>
						<!-- <view class="orderItem-3" @click="copyText(orderInfo.orderNo)">复制</view> -->
					</view>
					<view class="orderItem-min" v-if="orderInfo.gatewayorderId">
						<view class="orderItem-1" >支付交易编号：</view>
						<view class="orderItem-2">{{orderInfo.gatewayorderId}}</view>
						<!-- <view class="orderItem-3" @click="copyText(orderInfo.orderNo)">复制</view> -->
					</view>
					<view class="orderItem-min" v-if="orderInfo.name">
						<view class="orderItem-1">下单用户：</view>
						<view class="orderItem-2">{{orderInfo.name}}</view>
					</view>
					<view class="orderItem-min" v-if="orderInfo.mobile">
						<view class="orderItem-1">联系方式：</view>
						<view class="orderItem-2">{{orderInfo.mobile}}</view>
					</view>
					<view class="orderItem-min" v-if="orderInfo.time">
						<view class="orderItem-1">下单时间：</view>
						<view class="orderItem-2">{{orderInfo.time}}</view>
					</view>
					<view class="orderItem-min" v-if="orderInfo.paymold">
						<view class="orderItem-1">支付方式：</view>
						<view class="orderItem-2">{{orderInfo.paymold}}</view>
					</view>
					<view class="orderItem-min">
						<view class="orderItem-1" v-if="orderInfo.paytime">支付时间：</view>
						<view class="orderItem-2">{{orderInfo.paytime}}</view>
					</view>
					<view class="orderItem-min">
						<view class="orderItem-1" v-if="orderInfo.orderstatus">订单状态：</view>
						<view class="orderItem-2">{{orderInfo.orderstatus}}</view>
					</view>
					<!-- <view class="orderItem-min">
						<view class="orderItem-1">：</view>
						<view class="orderItem-2">{{orderInfo.orderstatus}}</view>
					</view> -->
					<!-- <view class="orderItem-min" style="border-bottom: 2rpx solid rgba(0,0,0,0)">
						<view class="orderItem-1">发票类型：</view>
						<view class="orderItem-2">不开发票</view>
					</view> -->
				</view>
				<!-- 订单信息 -->
				<!-- <view class="detailitem orderItem" style="margin-bottom: 100rpx;">
					<view class="orderItem-min orderInfo">
						<view class="orderItem-1">商品总额</view>
						<view class="orderItem-2">¥ 4.15</view>
					</view>
					<view class="orderItem-min orderInfo">
						<view class="orderItem-1">运费</view>
						<view class="orderItem-2">+ ¥5.00</view>
					</view>
					<view class="orderItem-min orderInfo" style="border-bottom: 2rpx solid rgba(0,0,0,0)">
						<view class="orderItem-1"></view>
						<view class="orderItem-2">实付款：<text style="color: red;"> ¥199.00</text></view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottomBox">
			<view class="leftTxt">¥<text style="font-size: 46rpx;margin-left: 15rpx;">{{priceTotal}}</text> </view>
			<view class="gnBox">
				<!-- <view class="item zhun">转派</view> -->
				<view class="item jie" @click="wuliu" v-if="orderInfo.state==2">查看物流</view>
				<view class="item jie" @click="onConfirm" v-if="orderInfo.paystatus==0||type!=2">立即支付</view>
				<view class="item lianxi" @click="pathUrl(1,searchVal.orderId)"
					v-else-if="orderInfo.isEnable&&(orderInfo.state>0&&orderInfo.state<4)">申请售后</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Alert from '@/utils/alert';
	export default {
		data() {
			return {
				backgroundColor: 0,
				nav_opacity: 'rgba(255,255,255,0)',
				fontColor: '#ffffff',
				type: '',
				loading: false,
				orderInfo: {
					list: [],
					body: ",",
				},
				searchVal: {
					orderId: '',
					orderNo: '',
				},
				address: {
					id: '',
					reginPathStr: ''
				},
				addressId: '',
				addtype:false,
				ids: '',
			}
		},
		computed: {
			priceTotal() {
				let total = 0
				let api = this.type ? 'ordersInfos' : 'list'
				if (this.orderInfo[api] && this.orderInfo[api].length) {
					this.orderInfo[api].forEach(v => {
						total = total + v.price * v.num
					})
				}
				return total
			}
		},
		// 导航栏渐变
		onPageScroll(e) {
			this.nav_opacity = `rgba(255,255,255,${(e.scrollTop > 255 ? 255 : e.scrollTop) / 255})`;
			if (e.scrollTop > 20) {
				this.fontColor = '#000000'
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
				})
			} else {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#ffffff'
				})
				this.fontColor = '#ffffff'
			}
		},
		onLoad(e) {
			if (e.val) {
				this.orderInfo = JSON.parse(e.val)
			}
			if (e.ids) {
				this.ids = JSON.parse(e.ids)
			}
			this.type = e.type || ''
			// console.log(this.orderInfo);
			this.getData()
			if (e.id) {
				this.searchVal.orderId = e.id || ''
				this.GetOrderInfo()
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			rightClick() {},
			getData() {
				this.$ajax.getgeceiving({
					IsDefault: true,
					MemberId: uni.getStorageSync('userInfo').id
				}).then(res => {
					this.address = res.data
					if (res.data.length) {
						this.addressId = res.data[0].id
					}
					this.loading = true
				})
			},
			/**
			 * @function 复制功能
			 */
			copyText(msg) {
				uni.setClipboardData({
					data: msg,
					success: () => {
						Alert.success('复制成功');
					},
					fail: () => {
						Alert.success('复制失败');
					}
				});

			},
			// 地址弹窗显示
			toggleTab() {
				if(this.addtype) return
				uni.navigateTo({
					url: '/pages/home/addressList/addressList'
				})
			},
			// 获取订单详情
			GetOrderInfo() {
				this.$ajax.GetOrderInfo(this.searchVal).then(res => {
					this.orderInfo = res.data
					if(res.data.receivingInfos.length){
						this.addtype=true
						this.address=res.data.receivingInfos
					}else {
						this.addtype=false
					}
				})
			},
			// 跳转
			pathUrl(type, id) {
				// console.log(id);
				// returnid
				if (type==1) {
					uni.navigateTo({
						url: `/pages/order/aftersales/aftersales?id=${id}`
					})
				} else {
					uni.redirectTo({
						url: `/pages/order/aftersales/aftersales?id=${this.searchVal.orderId}&product=${id}`
					})
				}

			},
			// 物流
			wuliu(){
				uni.redirectTo({
					url:`/pages/order/logisticsInfo/logisticsInfo?id=${this.orderInfo.orderNo}`
				})
			},
			onConfirm(val) {
				let that = this
				let OpenId = uni.getStorageSync('userInfo').openId
				if (this.orderInfo.paystatus == 0 && that.orderInfo.pay) {
					let data = {
						...JSON.parse(that.orderInfo.pay.pay),
						OpenId
					}
					that.$ajax.MiniProgramPay(data).then(res2 => {
						uni.requestPayment({
							provider: 'wxpay',
							...res2.data,
							success: function(res) {
								uni.redirectTo({
									url: `/pages/order/order/order?type=${1}`
								})
							},
						})
					})
					return
				}
				that.orderInfo.ReceivingId=this.addressId
				that.$ajax.AddOrder(that.orderInfo).then(res => {
					if (that.ids) {
						that.$ajax.ShoppingCartDelete(that.ids)
							.then(res2 => {
								console.log('删除成功');
							})
					}
					let data = {
						...JSON.parse(res.data),
						OpenId
					}
					that.$ajax.MiniProgramPay(data).then(res2 => {
						uni.requestPayment({
							provider: 'wxpay',
							...res2.data,
							success: function(res) {
								uni.redirectTo({
									url: `/pages/order/order/order?type=${1}`
								})
							},
							fail:function(err){
								uni.redirectTo({
									url: `/pages/order/order/order?type=${0}`
								})
							}
						})
					})

				})



			}
		},

	}
</script>

<style lang="scss">
	.content {
		color: #010101;
		font: normal 14px/2.2 Arial, Verdana, Tahoma, sans-serif;
		background-color: #F5F5F5;
	}

	.tang-feng-bg {
		width: 100%;
		height: 550rpx;
		position: relative;
		background: linear-gradient(to top, #ffffff, #0000ff);
	}

	.tang-feng-block {
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: -520rpx;
		position: relative;
		z-index: 3;

		.tang-feng-data {
			border-radius: 12rpx;
			margin-bottom: 20rpx;

			.detail-top {
				width: 100%;
				margin-bottom: 20rpx;

				.detail-top-1 {
					color: #ffffff;
					font-weight: bold;
					font-size: 46rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 70rpx;
						height: 65rpx;
						margin-right: 10rpx;
					}
				}

				.detail-top-2 {
					color: #ffffff;
					font-size: 32rpx;
					text-align: center;
					letter-spacing: 3rpx;
				}
			}

			.detailitem {
				background-color: #ffffff;
				border-radius: 20rpx;
				box-shadow: 0 0upx 6upx 0upx rgba(0, 0, 150, .2);
				margin-bottom: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.detail-address {
				.top {
					font-weight: bold;
					letter-spacing: 3rpx;
					font-size: 32rpx;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}

				.address {
					color: rgba(0, 0, 0, .7);
					display: flex;
					// justify-content: space-between;
					align-items: center;
				}
			}

			.shopBox {

				// height: 200rpx;
				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}

					.conBox {
						flex: 1;
						min-height: 200rpx;
						padding: 10rpx 20rpx;
						box-sizing: border-box;
						border-bottom: 2rpx solid #f3f3f3;

						.conBox-1 {
							font-size: 28rpx;
							font-weight: bold;
						}

						.conBox-2 {
							font-size: 22rpx;
							font-weight: bold;
							color: rgba(0, 0, 0, .7);
						}

						.conBox-3 {
							font-size: 34rpx;
							font-weight: bold;
							color: red;
						}
					}

					.number {
						text-align: center;
					}
				}
			}

			.orderItem {
				.orderItem-min {
					width: 100%;
					display: flex;
					align-items: center;
					letter-spacing: 4rpx;
					border-bottom: 2rpx solid #f3f3f3;
					padding: 15rpx 0;

					.orderItem-1 {
						width: 220rpx;
						color: rgba(0, 0, 0, .7);
					}

					.orderItem-2 {
						color: #000000;
						font-weight: bold;
						width: 380rpx;
						margin-right: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.orderItem-3 {
						padding: 0rpx 20rpx;
						box-sizing: border-box;
						border-radius: 10rpx;
						background-color: #eeeeee;
					}
				}

				.orderInfo {
					justify-content: space-between;
				}
			}
		}
	}

	.bottomBox {
		background-color: #ffffff;
		border: 1px solid #cccccc;
		/* 设置边框 */
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		/* 设置阴影 */
		width: 750rpx;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		z-index: 20;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		letter-spacing: 5rpx;

		.leftTxt {
			color: #e55239;
			font-size: 40rpx;
			font-weight: bold;
		}

		.gnBox {
			height: 100%;
			display: flex;
			align-items: center;

			.item {
				// width: 70rpx;
				background-color: #e55239;
				color: #ffffff;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				margin-left: 15rpx;
				border-radius: 10rpx;
			}

			.zhun {
				background-color: #e55239;
			}

			.jie {
				background-color: #6b5ef8;
			}

			.lianxi {
				background-color: #51baad;
			}
		}
	}
</style>